<template>
  <div>
    <div style="height: 633px;">

<!--      <div style="position: fixed;">-->
      <div style="overflow: auto;width: 1200px;height: 600px;position: fixed;">
        <div style="width: 1918px;height: 1012px;">
          <img :src="pmtUrl" style="width: 1918px;height: 1012px;">
          <VueDragResize :isActive="true" :w="14" :h="20" v-on:resizing="resize" v-on:dragging="resize"
                         :isResizable="false" :x="left" :y="top">
            <img :src="pic"/>
          </VueDragResize>
        </div>
      </div>
      </div>

<!--    </div>-->
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveLonLat">保 存</el-button>
    </div>
  </div>
</template>

<script>
  import { getSysConfig } from "@/api/basic/sysConfig";
  import VueDragResize from 'vue-drag-resize';
  import { uploadLonLat } from "@/api/basic/collectPoint";

export default {
  components: {
    VueDragResize
  },
  props: {
    collectPoint: {
      type: Object
    }
  },
  data() {
    return {
      pic:require('@/assets/image/area.png'),
      pmtUrl:require('@/assets/image/pmt.png'),
      top: Number(this.collectPoint.longitude),
      left: Number(this.collectPoint.latitude)
    };
  },
  watch:{
    collectPoint(val) {
      this.top=Number(this.collectPoint.longitude);
      this.left=Number(this.collectPoint.latitude);
    }
  },
  created() {
    this.getPmtUrl();
  },
  methods: {
    getPmtUrl(){
      getSysConfig().then(response => {
        if(response.data.pmtPic!=undefined && response.data.pmtPic!=''){
          this.pmtUrl = response.data.pmtPic;
        }
      });
    },
    resize(newRect) {
      this.top = newRect.top;
      this.left = newRect.left;
    },
    saveLonLat(){
      let obj = {
        id:this.collectPoint.id,
        longitude: this.top,
        latitude: this.left
      }
      uploadLonLat(obj).then(response => {
        if (response.code === 200) {
          // this.msgSuccess("保存成功");
        }
      });
    }
  }

}
</script>

